<template>
	<view class="socialContact">
		<view v-for="(value,key) in providerList" :key="key" @tap="tologin(value,key)">
			<text class="iconfont" :class="value.icon"></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				providerList: [],
			};
		},
		mounted() {
			uni.getProvider({
				service: 'oauth',
				success: (result) => {
					this.providerList = result.provider.map((value) => {
						let providerName = '';
						let icon = "";
						switch (value) {
							case 'weixin':
								providerName = '微信登录'
								icon = "icon-weixin"
								break;
							case 'qq':
								providerName = 'QQ登录'
								icon = "icon-icon"
								break;
							case 'sinaweibo':
								providerName = '新浪微博登录'
								icon = "icon-weibo"
								break;
							case 'xiaomi':
								providerName = '小米登录'
								break;
							case 'alipay':
								providerName = '支付宝登录'
								break;
							case 'baidu':
								providerName = '百度登录'
								break;
							case 'toutiao':
								providerName = '头条登录'
								break;
							case 'apple':
								providerName = '苹果登录'
								break;
						}
						return {
							name: providerName,
							id: value,
							icon
						}
					});
				},
				fail: (error) => {
					console.log('获取登录通道失败', error);
				}
			});
		},
		methods: {
			tologin(provider, key) {
				uni.login({
					provider: provider.id,
					// #ifdef MP-ALIPAY
					scopes: 'auth_user', //支付宝小程序需设置授权类型
					// #endif
					success: res => {
						this.$emit("thirdPartyLogin", {
							id: provider.id,
							openid: res.authResult.openid
						});
					},
					fail: err => {
						let str = "";
						if (key == 0) {
							str = "请登录微信";
						} else if (key == 1) {
							str = "请登录QQ";
						} else {
							str = "请登录微博";
						};
						// 提示信息
						uni.showToast({
							title: str,
						});
						console.log(err);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	// 各种社交账号
	.socialContact {
		@include flexCenterCenter;

		>view {
			flex: 1;
			@include flexCenterCenter;

			>text {
				@include flexCenterCenter;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				font-size: 2.2rem;
				color: #FFFFFF;
			}

			.icon-weixin {
				background-color: #008B80;

				&:active {
					background-color: #088179 !important;
				}
			}

			.icon-icon {
				background-color: #007AE2;

				&:active {
					background-color: #056AC1 !important;
				}
			}

			.icon-weibo {
				background-color: #F05D00;

				&:active {
					background-color: #D65503 !important;
				}
			}
		}
	}
</style>
